<template>
  <layout-sign>
    <div class="rd-box-center">
      <IconLogo class="rd-font-36" />
      <p class="rd-font-26 rd-font-600 rd-pl-12">云南省自然资源监测平台</p>
    </div>
    <a-tabs class="login-tabs rd-mb-32" v-model:activeKey="activeKey" :tabBarGutter="10">
      <a-tab-pane key="password" tab="密码登录">
        <div class="rd-px-8">
          <a-form
            ref="formRef"
            :model="passwordModelRef"
            :rules="rulesRef"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-item
              name="username"
            >
              <a-input placeholder="账号" size="large" v-model:value="passwordModelRef.username" />
            </a-form-item>
            <a-form-item
              name="password"
            >
              <a-input type="password" size="large" placeholder="密码" v-model:value="passwordModelRef.password" />
            </a-form-item>
            <a-row :gutter="8">
              <a-col :span="16">
                <a-form-item
                  name="captcha"
                >
                  <a-input placeholder="验证码" size="large" v-model:value="passwordModelRef.captcha" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-image :placeholder="true" :height="36" :src="captchaPath" @click="getCaptcha" />
              </a-col>
            </a-row>
            <a-button class="sign-btn" block :loading="loginWait" @click="goMain">登录</a-button>
          </a-form>
        </div>
      </a-tab-pane>
      <a-tab-pane key="code" tab="短信登录">短信登录</a-tab-pane>
    </a-tabs>
    <div class="rd-box-between">
      <a-checkbox v-model:checked="longToken">7天内自动登录</a-checkbox>
      <a-space>
        <a-button type="link">忘记密码</a-button>
        <span>|</span>
        <a-button type="link">注册</a-button>
      </a-space>
    </div>
  </layout-sign>
</template>

<script>
import { reactive, ref, toRaw } from 'vue'
import { useRouter } from 'vue-router'
import Cookie from 'vue-cookie'
import { Constant, Tools, Request } from '@/utils'

import { login } from '@/api'
import LayoutSign from '@/layout/LayoutSign.vue'
import IconLogo from '@/components/common/IconLogo.vue'

const { TOKEN_KEY } = Constant
const { getMainRoute, getUUID } = Tools

// 表单校验规则
const rulesRef = {
  username: [
    { required: true, message: '帐号不能为空', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' }
  ],
  captcha: [
    { required: true, message: '验证码不能为空', trigger: 'blur' }
  ]
}

export default {
  components: {
    LayoutSign,
    IconLogo
  },
  setup () {
    const activeKey = ref('password')
    const formRef = ref()
    const passwordModelRef = reactive({
      username: '',
      password: '',
      captcha: '',
      uuid: getUUID()
    })
    // 验证码地址
    const baseCaptchaPath = `${Request.defaults.baseURL}/captcha.jpg?uuid=${passwordModelRef.uuid}`
    const captchaPath = ref(baseCaptchaPath)
    const router = useRouter()
    const longToken = ref(false)
    const loginWait = ref(false)

    /**
     * 获取验证码
     */
    const getCaptcha = () => {
      passwordModelRef.uuid = getUUID()
      captchaPath.value = baseCaptchaPath
    }
    const goMain = async () => {
      formRef.value.validate().then(async () => {
        loginWait.value = true
        const loginInfo = await login(toRaw(passwordModelRef))
        if (loginInfo.code === 200) {
          const { token } = loginInfo.data
          Cookie.set(TOKEN_KEY, token, { expires: longToken.value ? '7d' : '1.5h' })
          const mainRoute = await getMainRoute()
          router.addRoute(mainRoute)
          if (mainRoute.children.length) {
            const thePath = mainRoute.children[0].path
            router.push(thePath)
          }
        } else {
          console.log(loginInfo)
        }
        loginWait.value = false
      }).catch(err => { console.log(err) })
    }

    return {
      activeKey,
      rulesRef,
      formRef,
      passwordModelRef,
      captchaPath,
      longToken,
      loginWait,
      labelCol: {
        span: 0
      },
      wrapperCol: {
        span: 24
      },
      getCaptcha,
      goMain
    }
  }
}
</script>

<style lang="scss">
@import "../assets/scss/_vars.scss";
.login-tabs {
  width: 400px;
  .ant-tabs-bar {
    border-color: #C8C8C8;
  }
  .ant-tabs-nav {
    color: $--color-grey-sub;
    font-size: 18px;
    .ant-tabs-tab-active {
      color: $--color-grey;
    }
  }
  .ant-tabs-ink-bar {
    height: 4px;
    background-image: $--gradient-primary;
  }
}
.sign-btn {
  &.ant-btn {
    height: 42px;
    font-size: 18px;
    background-image: $--gradient-primary;
    color: $--color-white;
    border-radius: 8px;
  }
}
</style>

<style lang="scss" scoped>
</style>
